<template>
  <!-- <div class="sub-form"> -->
    <!-- <div class="sub-form-title">{{title}}</div>
    <div class="sub-form-box"> -->
      <div class="sub-form-item">
        <div class="sub-form-item-label" v-if="title">{{title}}</div>
        <el-input v-else :clearable='true' v-model="val" @input="valueChange" :disabled='disable'></el-input>
        <el-input :clearable='true' style="margin:7px;width:90%" v-model="val" @input="valueChange" :disabled='disable'></el-input>
      </div>
    <!-- </div> -->
  <!-- </div> -->
</template>

<script>
export default {
  data(){
    return {
      val:''
    }
  },
  props:{
    value:[String,Number],
    title:{
      default:'',
      typeof:String
    },
    formDatas:{
      typeof:Array,
      default:function () {
        return []
      }
    },
    disable:{
      typeof:Boolean,
      default:false
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  watch:{
    value(newVal) {
				this.val = newVal
    },
  },
  methods:{
    valueChange(val){
      this.$emit('change',val)
    }
  }
}
</script>

<style lang="less" scoped>
.sub-form{
  border: 1px solid #D8D8D8;
  font-size: 14px;
}
.sub-form-item{
  box-sizing: border-box;
  flex: 1;
  &-label{
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    text-align: left;
    border-bottom: 1px solid #D8D8D8;
    padding: 9px 7px;
    white-space: nowrap;
  }
}
</style>